<template>
  <el-dialog :model-value="dialogVisible" title="读卡查询" width="420px" :before-close="handleClose" draggable>
    <div class="searchBar">
      <el-form-item label="卡类别">
        <el-select v-model="tagid" placeholder="请选择卡类别">
          <el-option v-for="item in etagClassList" :key="item.tagid" :label="item.tagname" :value="item.tagid" />
        </el-select>
        <el-button :icon="Search" class="searchBtn" @click="_readCard">查询</el-button>
      </el-form-item>
    </div>
    <el-button class="downloadExe" type="danger" :icon="Download" link @click="_downloadExe">下载服务程序</el-button>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="tsx" name="CardReadingDialog">
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import { Search, Download } from "@element-plus/icons-vue";
// import { msgMap, VITE_API_URL } from "@/config/index";
import { msgMap } from "@/config/index";
// import { convertImageToBase64, downloadEvt, getAssetsFile } from "@/utils";
import { downloadEvt, getAssetsFile } from "@/utils";
import { getEtagClass, getUid } from "@/api/modules/common";
import { readCard } from "@/api/modules/cardIssuingCenter/employeeManage";

defineProps<{ dialogVisible: boolean; handleClose: () => void }>();

const emit = defineEmits(["readCardCb"]);

onMounted(() => {
  getEtagClassFunc();
});

// const cardInfo = ref();
const tagid = ref("");
const etagClassList = ref([]);

/**
 * 读取卡片
 */
const _readCard = async () => {
  try {
    const data = (await getUid(tagid.value)) as { msgCode: string | number; msgName: string };
    if (data.msgCode == 0) {
      getCardInfo(data.msgName);
    } else if (data.msgCode == -2) {
      ElMessage.error(msgMap.get(13));
    } else if (data.msgCode == -38) {
      ElMessage.error(msgMap.get(14));
    } else if (data.msgCode == -5) {
      ElMessage.error(msgMap.get(30));
    } else if (data.msgCode == -100) {
      ElMessage.error(msgMap.get(-1));
    } else {
      ElMessage.error(msgMap.get(15));
    }
  } catch (error) {
    console.log(error);
  }
};

/**
 * 下载文件
 */
const _downloadExe = () => {
  downloadEvt(getAssetsFile("file/serviceSetup.exe"), "serviceSetup.exe");
};

/**
 * 获取卡片详情
 */
const getCardInfo = async stringParam1 => {
  try {
    const res = await readCard({ stringParam1 });
    if (Array.isArray(res.data) && res.data.length) {
      // cardInfo.value = res.data[0];
      // cardInfo.value.avatar = getAssetsFile("images/user.gif");
      // convertImageToBase64(`${VITE_API_URL}/employee/photo/download?empid=${cardInfo.value.empid}`, (base64Value: string) => {
      //   cardInfo.value.avatar = base64Value;
      // });
      emit("readCardCb", res.data);
    } else {
      ElMessage.error("暂未查询到该卡所属人员信息");
    }
  } catch (error) {
    console.log(error);
  }
};

/**
 * 获取卡类型
 */
const getEtagClassFunc = async () => {
  try {
    const res = await getEtagClass();
    etagClassList.value = res.data;
    if (res.data && res.data.length) {
      tagid.value = res.data[0].tagid;
    }
  } catch (error) {
    console.log(error);
  }
};
</script>
<style lang="scss" scoped>
.searchBtn {
  margin-left: 20px;
}
</style>
